<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-item label="设备编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-group compact >
                <a-select @change="handleChange" :disabled="flag" show-search
                            option-filter-prop="children"
                            v-decorator="['equipmentCode']" style="width: 100%">
                  <a-select-option v-for="text in form1" :key="text.code"  >
                    {{text.code}}
                  </a-select-option>
                </a-select>
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['equipmentName']" placeholder="请输入设备名称" disabled></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="设备型号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['equipmentMode']" placeholder="请输入设备型号" disabled></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="设备运行状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag  v-decorator="['equipmentStatus']"  :trigger-change="true" dictCode="equipment_status " placeholder="请选择设备状态" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="操作人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['actionPerson', validatorRules.actionPerson]" placeholder="请输入操作人"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="开机时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择开机时间" v-decorator="['turnOnTime', validatorRules.turnOnTime]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="关机时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择关机时间" v-decorator="['turnOffTime', validatorRules.turnOffTime]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="保养日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择保养日期" v-decorator="['maintenanceDate', validatorRules.maintenanceDate]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="设备其他保养项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-editor v-decorator="['otherProject',{trigger:'input'}]"/>
            </a-form-item>
          </a-col>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JDate from '@/components/jeecg/JDate'  
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JEditor from '@/components/jeecg/JEditor'
  export default {
    name: 'EquipmentMaintenanceForm',
    components: {
      JFormContainer,
      JDate,
      JDictSelectTag,
      JEditor,
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        form1:[{
          code: '',
          name: '',
          status: '',
          mode: ''
        },
        ],
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          equipmentCode: {
            rules: [
              { required: true, message: '请输入设备编码 !'},
            ]
          },
          equipmentName: {
            rules: [
              { required: true, message: '请输入设备名称!'},
            ]
          },
          equipmentMode: {
            rules: [
              { required: true, message: '请输入设备型号!'},
            ]
          },
          equipmentStatus: {
            rules: [
              { required: true, message: '请输入设备运行状态!'},
            ]
          },
          actionPerson: {
            rules: [
              { required: true, message: '请输入操作人!'},
            ]
          },
          turnOnTime: {
            rules: [
              { required: true, message: '请输入开机时间!'},
            ]
          },
          turnOffTime: {
            rules: [
              { required: true, message: '请输入关机时间!'},
            ]
          },
          maintenanceDate: {
            rules: [
              { required: true, message: '请输入保养日期!'},
            ]
          },
        },
        url: {
          add: "/maintenance/equipmentMaintenance/add",
          edit: "/maintenance/equipmentMaintenance/edit",
          queryById: "/maintenance/equipmentMaintenance/queryById",
          queryCode:"/maintenance/equipmentMaintenance/queryCode"
        },
        flag:true,
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      this.getCode();
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      add() {
        this.edit({},1);
      },
    edit(record,flag) {
        if (flag){
          this.flag = false
        }else {
          this.flag = true
        }
      console.log(this.flag)
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'equipmentCode', 'equipmentName', 'equipmentMode', 'equipmentStatus', 'actionPerson', 'turnOnTime', 'turnOffTime', 'maintenanceDate', 'otherProject'))
      })
    },
      //渲染流程表单数据
      showFlowData() {
        if (this.formBpm === true) {
          let params = {id: this.formData.dataId};
          getAction(this.url.queryById, params).then((res) => {
            if (res.success) {
              this.edit(res.result);
            }
          });
        }
      },
      submitForm() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            let formData = Object.assign(this.model, values);
            console.log("表单提交数据", formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'equipmentCode', 'equipmentName', 'equipmentMode', 'equipmentStatus', 'actionPerson', 'turnOnTime', 'turnOffTime', 'maintenanceDate', 'otherProject'))
      },
      handleChange(value){
        for (let i = 0; i < this.form1.length; i++) {
          if (this.form1[i].code === value){
            this.form.setFieldsValue({
              equipmentName: this.form1[i].name,
              equipmentMode: this.form1[i].mode,
              equipmentStatus:this.form1[i].status,
            })
          }
        }
      },
      getCode(){
        getAction(this.url.queryCode).then(res =>{
          if(res.success)
          {
            console.log("编码集合"+res);
              this.form1 = res.result;
          }
          else
          {
            alert(res.message);
          }
        })
      }
    },
  }
</script>